<template>
	<view class="page-content">
		<view class="n_title">{{title}}</view>
		<view class="content-content">
			<view class="d-pannel-lg t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">报警信息统计</view>
				</view>
				<view class="uni-row tab-view t10">
					<view :class="timeType=='1' ? 'tab tab-act' : 'tab'" @click="timeTypechange('1')">今日</view>
					<view :class="timeType=='2' ? 'tab tab-act' : 'tab'" @click="timeTypechange('2')">本周</view>
					<view :class="timeType=='3' ? 'tab tab-act' : 'tab'" @click="timeTypechange('3')">本月</view>
				</view>
				<view class="t10 char-view">
					<echarts ref="echarts"  :option="deviceWaringInfoOpt" canvasId="deviceWaringInfoOpt"></echarts>
				</view>
			</view>
			
			<view class="d-pannel t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">实时报警检测</view>
				</view>
				<view>
					<view v-for="(d,dix) in waring" class="uni-row d-i" :key="'d'+dix">
						<view>{{common.timestampToTimeMils(d.time)}}</view>
						<view>{{d.regionName}}</view>
						<view>{{d.name}}</view>
						<view>{{d.waringName}}</view>
					</view>
				</view>
			</view>
			
			<view class="d-pannel-lg t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">故障时间段统计</view>
				</view>
				<view class="char-view">
					<echarts ref="echarts" :option="deviceWaringTimeOpt" canvasId="deviceWaringTimeOpt"></echarts>
				</view>
			</view>
			
			<view class="d-pannel-lg t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">报警趋势统计(近一个月)</view>
				</view>
				<view class="char-view">
					<echarts ref="echarts" :option="deviceWaringfxOpt" canvasId="deviceWaringfxOpt"></echarts>
				</view>
			</view>
			
			<view class="d-pannel-lg t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">报警类型及占比</view>
				</view>
				<view class="uni-row tab-view t10">
					<view :class="waringType=='1' ? 'tab tab-act' : 'tab'" @click="waringTypeChange('1')">今日</view>
					<view :class="waringType=='2' ? 'tab tab-act' : 'tab'" @click="waringTypeChange('2')">本周</view>
					<view :class="waringType=='3' ? 'tab tab-act' : 'tab'" @click="waringTypeChange('3')">本月</view>
				</view>
				<view class="t10 char-view">
					<echarts ref="echarts" :option="deviceWaringZbOpt" canvasId="deviceWaringZbOpt"></echarts>
				</view>
			</view>
			
			
			<view class="d-pannel t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">报警级别及比例</view>
				</view>
				<view class="uni-row1 t10">
					<view>
						<view class="device-zc">正常设备{{waringDeviceSum.waring}}台</view>
					</view>
					<view>
						<view class="device-yc">异常设备{{waringDeviceSum.waring}}台</view>
					</view>
				</view>
				<view>
					<view class="uni-row">
						<view class="wd_name">设备</view>
						<view class="wd_no">编号</view>
						<view class="wd_status">设备状态</view>
					</view>
					<view v-for="(d,dix) in waringDeviceSum.devices" class="uni-row d-i" :key="'dw'+dix">
						<view class="wd_name">{{d.name}}</view>
						<view class="wd_no">{{d.no}}</view>
						<view class="wd_status">
							<span v-if="d.runSatus==0">异常</span>
							<span v-if="d.runSatus==1">正常</span>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'智能诊断',
				timeType: '1',
				deviceWaringInfoOpt:null,
				waring:[],
				deviceWaringTimeOpt:null,
				deviceWaringfxOpt:null,
				waringType:'1',
				deviceWaringZbOpt:null,
				waringDeviceSum:{}
				
			}
		},
		onShow(){
			this.deviceGzWaring()
			this.deviceWaring()
			this.deviceWaringTime()
			this.getDeviceWaringfx()
			this.deviceGzTimeType()
			this.deviceWaringDevice()
		},
		onLoad(){
		},
		methods: {
			timeTypechange(val){
				this.timeType = val
				this.deviceGzWaring()
			},
			deviceGzWaring(){
				this.common.get('/api/intelligent-diagnosis/device/gz/waring',{timeType: this.timeType},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					let legend = ['待确认','待处理','已经完成']
					this.deviceWaringInfoOpt = this.$echarts.drawpadAngle(legend, res.data)
				})
		  },
		  deviceWaring(){
			  
			  this.common.getNotLoading('/api/intelligent-diagnosis/device/waring',{},(res)=>{
			  	if(res.code!=1){
			  		this.common.showError(res.msg)
			  		return
			  	}
			  	let legend = ['待确认','待处理','已经完成']
			  	this.waring = res.data
			  })
			  
			},
			deviceWaringTime(){
				
				this.common.getNotLoading('/api/intelligent-diagnosis/device/waring/time',{},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					let legend = ['待确认','待处理','已经完成']
					this.deviceWaringTimeOpt = this.$echarts.drawBar(null,['00:00', '04:00', '08:00', '12:00', '16:00', '20:00',"24:00"],res.data)
				})
				
			  },
			  getDeviceWaringfx(){
				  this.common.getNotLoading('/api/intelligent-diagnosis/device/waring/time-trend',{},(res)=>{
				  	if(res.code!=1){
				  		this.common.showError(res.msg)
				  		return
				  	}
				  	this.deviceWaringfxOpt =  this.$echarts.drawLine(['已处理','未处理'],res.data.xaxis,res.data.datas)
				  })
				},
				waringTypeChange(val){
					this.waringType = val
					this.deviceGzTimeType()
				},
			  deviceGzTimeType(){
				  this.common.getNotLoading('/api/intelligent-diagnosis/device/waring/type-detail',{waringType: this.waringType},(res)=>{
				  	if(res.code!=1){
				  		this.common.showError(res.msg)
				  		return
				  	}
				  	let legend = ['设备故障','误报','门限','AI告警']
				  	this.deviceWaringZbOpt = this.$echarts.drawpieDoughnut(legend,res.data)
				  })
				},
				deviceWaringDevice(){
				  this.common.getNotLoading('/api/intelligent-diagnosis/device/waring/device',{},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					this.waringDeviceSum = res.data
				  })
				},
				  
		}
	}
</script>
<style>
	.content-content{
		padding-bottom: 10px;
	}
	.char-view {
		height: 250px;
	}
	.device-zc{
		 background-image: url('/static/device1.png');
		 background-size: contain;
		 text-align: center;
		 aspect-ratio: 77 / 16;
		 height: 40px;
		 line-height: 32px;
		 background-repeat: no-repeat;
		 width: 80%;
	}
	.device-yc{
		 background-image: url('/static/device2.png');
		 background-size: contain;
		 text-align: center;
		 aspect-ratio: 77 / 16;
		 height: 40px;
		 line-height: 32px;
		 background-repeat: no-repeat;
		 width: 80%;
	}
	.wd_name{
		width: calc((100% - 100px) / 2);
	}
	.wd_no{
		width: calc((100% - 100px) / 2);
	}
	.wd_status{
		width: 70px;
	}
	.d-i{
		background: linear-gradient(92deg,#ff764e, rgba(255,118,78,0));
		margin-top: 5px;
		padding-left: 5px;
	}
</style>
